import { useState } from 'react'
import ReactMarkDown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import remarkGemoji from "remark-gemoji";
import rehypeRaw from 'rehype-raw'
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark, prism, } from 'react-syntax-highlighter/dist/esm/styles/prism';
// import { dark, github, a11yLight, githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import { ClipboardUtils } from '@/utils'

import './md.scss'
import { UnflodSvg, CopySvg } from '@/assets/svg'

// 暗色：oneDark
// 亮色：prism
const theme = oneDark

type MdOptions = {
    content: string;
    showLineNumbers?: boolean,
}

const MdPriview: React.FC<MdOptions> = ({ content, showLineNumbers = true }) => {
    return (
        <ReactMarkDown remarkPlugins={[remarkGfm, remarkGemoji, remarkMath]} rehypePlugins={[rehypeRaw, rehypeKatex]}
            components={{
                code(props: any) {
                    const { node, children, className, ...rest } = props
                    const match = /language-(\w+)/.exec(className || "");

                    let [isShowCode, setIsShowCode] = useState(true);
                    let [isShowCopy, setIsShowCopy] = useState(false);
                    let [coptReturn, setCopyReturn] = useState('');

                    if (match) {
                        return <>

                            <div className="code-header dark">
                                <div
                                    style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "50% calc(50% - 1.5px)" }}
                                    className={`flex items-center ${isShowCode ? "code-rotate-down" : "code-rotate-right"}`}
                                    onClick={() => setIsShowCode(!isShowCode)}
                                >
                                    <UnflodSvg />
                                </div>
                                <div>
                                    {match && match[1]}
                                </div>
                                <div
                                    className="preview-code-copy"
                                    onClick={() => {
                                        ClipboardUtils.copyText(String(children)).then(res => {
                                            if (res) {
                                                setIsShowCopy(true);
                                                setCopyReturn('复制成功')
                                            }
                                            else setCopyReturn('复制失败')
                                        })
                                        setTimeout(() => {
                                            setIsShowCopy(false);
                                        }, 1500);
                                    }}
                                >
                                    {isShowCopy && <span className="opacity-0-1-0 copy-success">{coptReturn}</span>}
                                    <CopySvg />
                                </div>
                            </div>
                            {isShowCode && <SyntaxHighlighter className="code-body" {...rest} PreTag="div"
                                showLineNumbers={showLineNumbers} language={match[1]} style={theme}>
                                {String(children).replace(/\n$/, "")}
                            </SyntaxHighlighter>
                            }
                        </>
                    }
                    return <code className="inline-code" {...rest}>
                        {children}
                    </code >


                },
                h1({ children }: any) {
                    return (
                        <h1 id="title-1" className="title">
                            {children}
                        </h1>
                    );
                },
                h2({ children }: any) {
                    return (
                        <h2 id="title-2" className="title">
                            {children}
                        </h2>
                    );
                },
                h3({ children }: any) {
                    return (
                        <h3 id="title-3" className="title">
                            {children}
                        </h3>
                    );
                },
                h4({ children }: any) {
                    return (
                        <h4 id="title-4" className="title">
                            {children}
                        </h4>
                    );
                },
                h5({ children }: any) {
                    return (
                        <h5 id="title-5" className="title">
                            {children}
                        </h5>
                    );
                },
                h6({ children }: any) {
                    return (
                        <h6 id="title-6" className="title">
                            {children}
                        </h6>
                    );
                },

            }}
        >
            {content}
        </ReactMarkDown >
    )
}

export default MdPriview

